<template>
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-6">
    <div class="flex flex-col items-center">
      <!-- 头像 -->
      <div class="w-20 h-20 rounded-full overflow-hidden mb-4">
        <img 
          :src="userInfo.avatar" 
          :alt="userInfo.name" 
          class="w-full h-full object-cover"
        />
      </div>
      
      <!-- 用户名 -->
      <div class="text-lg font-semibold text-gray-900 mb-1">{{ userInfo.name }}</div>
      
     
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import avatarUrl from '@/assets/avater.png'

// 用户信息
const userInfo = ref({
  name: '角色召唤师',
  avatar: avatarUrl,
  isOnline: true
})
</script>
